<template>
  <!-- 宝箱线路图容器 -->
  <div class="box" :style="{
    gridTemplateAreas: generateGridAreas(),
  }">
    <!-- 单个宝箱项 -->
    <div v-for="item in lineItems" :key="item.id" class="item" :style="{ gridArea: item.gridArea }"
      :class="item.arrowClass" @click="handleClick(item)">
      <NuxtImg :src="item.icon" :class="{ noImg: item.status === 0 }" />
      <div>
        <p :class="{ white: item.status === 2 }">{{ item.people }} {{ $t('ranking.tc_lines_people') }}</p>
      </div>
      <div class="money">{{ item.money }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 属性与事件声明
const props = defineProps(['activityData'])
const emit = defineEmits(['claim'])
const userStore = useUserStore()

// 线条项目数据 - 使用循环生成
const arr = new Array(100).fill({});
const lineItems = computed(
  () => (props.activityData.boxes || arr).map((item: any, index: number) => {
    const id = index + 1;
    const position = index + 1;
    // 计算箭头class
    let arrowClass = "";
    // 4的整数倍元素：向下箭头
    if (position % 4 === 0) {
      arrowClass = "down-arrow";
    }
    // 基数行前3个元素：向右箭头 (第1行：1,2,3)
    else if (Math.floor((position - 1) / 4) % 2 === 0 && position % 4 !== 0) {
      arrowClass = "right-arrow";
    }
    // 偶数行后3个元素：向左箭头 (第2行：6,7,8)
    else if (Math.floor((position - 1) / 4) % 2 === 1 && position % 4 !== 0) {
      arrowClass = "left-arrow";
    }
    // 最后一个元素不加箭头
    if (position === (props.activityData.boxes?.length || arr.length)) {
      arrowClass = "";
    }
    return {
      id: item.id || id,
      people: item.num || 0,
      money: apo.utils.formatAmount(item?.reward || 0),
      gridArea: `a${index + 1}`, // 这个不能变，涉及布局
      status: item.state || 0, // 箱子领取状态,0=>不能领取,1=>可以领取,2=>已经领取,3=>充值就能领取,4=>次日才可领取
      icon: item.state === 2 ? 'images/layout/Box_open 1.png' : "/images/layout/treasureChest_8.png",
      arrowClass,
      ...item
    };
  })
);

// 动态生成Grid布局区域
const generateGridAreas = () => {
  const rows = [];
  const itemsPerRow = 4;
  const totalRows = Math.ceil(lineItems.value.length / itemsPerRow);

  for (let row = 0; row < totalRows; row++) {
    const rowItems = [];
    const startIndex = row * itemsPerRow;

    if (row % 2 === 0) {
      // 偶数行：从左到右 (1,2,3,4)
      for (let col = 0; col < itemsPerRow; col++) {
        const itemIndex = startIndex + col;
        if (itemIndex < lineItems.value.length) {
          rowItems.push(`a${itemIndex + 1}`);
        } else {
          // 如果这一行没有足够的项目，用空字符串填充
          rowItems.push(".");
        }
      }
    } else {
      // 奇数行：从右到左 (8,7,6,5)
      for (let col = itemsPerRow - 1; col >= 0; col--) {
        const itemIndex = startIndex + col;
        if (itemIndex < lineItems.value.length) {
          rowItems.push(`a${itemIndex + 1}`);
        } else {
          // 如果这一行没有足够的项目，用空字符串填充
          rowItems.push(".");
        }
      }
    }

    if (rowItems.length > 0) {
      rows.push(`"${rowItems.join(" ")}"`);
    }
  }

  return rows.join("\n");
};

// 点击箱子
function handleClick(item: any) {
  // receive_cond  领取条件,1=>无条件,2=>次日领取宝箱,3=>次日充值领取宝箱

  // 跳转充值
  if (item.status === 3) {
    userStore.changeShowCarteira(true)
    return
  }

  // 点击次日才能领取的宝箱
  if (item.status === 4) {
    apo.toast.showFail($t('ranking.box_toast'))
    return
  }


  // 可以领取但领取数量已达阈值
  if (item.status === 1 && props.activityData.today_receive_count >= props.activityData.max_receive_count) {
    apo.toast.showFail($t('ranking.box_toast'))
    return
  }

  // 过滤不可领取状态
  if (item.status !== 1) {
    return;
  }


  emit('claim', item)
}
</script>

<style scoped lang="scss">
.box {
  --cf46e48e: url(/images/layout/treasureChest_7.png);
  height: 8.5rem;
  min-height: 8.5rem;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1.94rem);
  background: #312734;
  border-radius: 0.2rem;
  padding-bottom: 1rem;
  margin-bottom: 0.1rem;
  justify-content: space-between;
  row-gap: 1rem;
  grid-auto-rows: 1.6rem;

  .item {
    background-size: 100% 100%;
    border-radius: 0.3rem;
    width: 1.94rem;
    height: 1.6rem;
    min-height: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: flex-end;

    img {
      width: 1rem;
      margin-top: 0.2rem;
    }

    .noImg {
      -webkit-filter: brightness(50%);
      filter: brightness(50%);
    }

    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    p {
      color: #B197B9;
      font-size: 0.25rem;
      margin: 0;
    }

    .white {
      color: #fff;
    }

    .money {
      position: absolute;
      bottom: -0.5rem;
      color: #FFD700;
      font-size: 0.35rem;
      font-weight: 600;
    }

    // 奇数行项目（从左到右）
    &.odd:after {
      content: "";
      width: 0.87rem;
      height: 0.77rem;
      background: #ff6b6b;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: calc(-0.3rem + 100%);
      top: calc(50% + 0.1rem);
    }

    // 偶数行项目（从右到左）
    &.even:after {
      content: "";
      width: 0.87rem;
      height: 0.77rem;
      background: #ff6b6b;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: calc(-0.3rem + 100%);
      top: calc(50% + 0.1rem);
    }

    // 每行最后一个项目不显示连接线
    &.lastItem:after {
      display: none;
    }
  }

  * {
    transition: all 0.2s ease-in-out;
  }
}

.box .right-arrow:after {
  content: "";
  width: 0.87rem;
  height: 0.77rem;
  background: var(--cf46e48e);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: calc(-0rem + 100%);
  top: calc(50% + 0.1rem);
}

.box .left-arrow:after {
  content: "";
  width: 0.87rem;
  height: 0.77rem;
  background: var(--cf46e48e);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: calc(-0rem + 100%);
  top: calc(50% + 0.1rem);
  transform: rotate(180deg);
}

.box .down-arrow:after {
  content: "";
  width: 0.87rem;
  height: 0.77rem;
  background: var(--cf46e48e);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: calc(50% - 0.4rem);
  bottom: -1.34rem;
  transform: rotate(90deg);
}
</style>
